<template>
    <!--还款数据-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('pageTitle.collectionData') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="date">
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.date"
                                    type="daterange"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    :editable="false"
                                    :picker-options="pickerOptions"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.startDate')"
                                    :end-placeholder="$t('common.endDate')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="userType">
                            <el-select v-model="form.userType" :multiple="true" :placeholder="$t('system.userType')" style="width:100%;">
<!--                                <el-option :key="3" :value="3" :label="$t('common.all')" ></el-option>-->
                                <el-option :key="0" :value="0" :label="$t('common.newUser')" ></el-option>
                                <el-option :key="1" :value="1" :label="$t('common.secNewUser')" ></el-option>
                                <el-option :key="2" :value="2" :label="$t('common.oldUser')" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="appName" label="">
                            <select-app-list :multiple="true" v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app包名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="getTableData" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportExcel" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" show-summary :summary-method="getSummaries" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column label="放款日" prop="dueDate" min-width="120"></el-table-column>
                        <el-table-column label="合同金额" prop="dueContract" min-width="130"><template slot-scope="{row}">{{ row.dueContract | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S1入催金额" prop="s1Overdue" min-width="130"><template slot-scope="{row}">{{ row.s1Overdue | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S1入催率" prop="s1OverdueRate" min-width="130"><template slot-scope="{row}">{{ row.s1OverdueRate }}</template></el-table-column>
                        <el-table-column label="S1回收金额" prop="s1Paid" min-width="130"><template slot-scope="{row}">{{ row.s1Paid | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S1回收率" prop="s1PaidRate" min-width="130"><template slot-scope="{row}">{{ row.s1PaidRate }}</template></el-table-column>
                        <el-table-column label="S2入催金额" prop="s2Overdue" min-width="130"><template slot-scope="{row}">{{ row.s2Overdue | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S2入催率" prop="s2OverdueRate" min-width="130"><template slot-scope="{row}">{{ row.s2OverdueRate }}</template></el-table-column>
                        <el-table-column label="S2回收金额" prop="s2Paid" min-width="130"><template slot-scope="{row}">{{ row.s2Paid | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S2回收率" prop="s2PaidRate" min-width="130"><template slot-scope="{row}">{{ row.s2PaidRate }}</template></el-table-column>
                        <el-table-column label="S3入催金额" prop="s3Overdue" min-width="130"><template slot-scope="{row}">{{ row.s3Overdue | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S3入催率" prop="s3OverdueRate" min-width="130"><template slot-scope="{row}">{{ row.s3OverdueRate }}</template></el-table-column>
                        <el-table-column label="S3回收金额" prop="s3Paid" min-width="130"><template slot-scope="{row}">{{ row.s3Paid | formatCurrency }}</template></el-table-column>
                        <el-table-column label="S3回收率" prop="s3PaidRate" min-width="130"><template slot-scope="{row}">{{ row.s3PaidRate }}</template></el-table-column>
                        <el-table-column label="未还金额" prop="inOverdueContract" min-width="130"><template slot-scope="{row}">{{ row.inOverdueContract | formatCurrency }}</template></el-table-column>
                        <el-table-column label="未还占比" prop="inOverdueContractRate" min-width="130"><template slot-scope="{row}">{{ row.inOverdueContractRate }}</template></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
</style>
